import React, {
  Component
} from 'react';
import {
  StyleSheet,
  Dimensions,
  InteractionManager,
  Image,
  View,
  TouchableWithoutFeedback
} from 'react-native';
import {
  Container,
  Header,
  Title,

  Button,
  Icon,
  Content,
  List,
  ListItem,
  Text
} from 'native-base';
import Swiper from 'react-native-swiper';
import {
  Col,
  Row,
  Grid
} from 'react-native-easy-grid';
const items = [{
  title: 'Hello Swiper',
  img: 'https://img.alicdn.com/tps/TB16culNpXXXXbHXpXXXXXXXXXX-520-280.jpg'
}, {
  title: 'Beautiful',
  img: 'https://aecpm.alicdn.com/simba/img/TB1vg.SNXXXXXarXXXXSutbFXXX.jpg'
}, {
  title: 'And simple',
  img: 'https://img.alicdn.com/tps/TB1QRxaNpXXXXXOapXXXXXXXXXX-520-280.jpg'
}];
var {
  height,
  width
} = Dimensions.get('window');
import Login from '../pages/Login';
import SlideBox from '../components/SlideBox';
import MenuButton from '../components/MenuButton';
import TitleWithLine from '../components/TitleWithLine';
const logoImg = require('../img/logo.png');

class Shop extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };

  }

  _pressButton() {
    this.props.navigator.push({
      component: Login
    })
  }

  _onPressButton() {
    alert('hello')
  }

  render() {
    return (
      <Container style={{}}>
    <Header backgroundColor='#ff5001'>
                    <Button transparent>
                        <Icon name='ios-arrow-back' style={{fontSize: 26, color: '#ffffff'}} />
                    </Button>
                    
                      <Title style={{color:'#ffffff'}}>
                          即刻商城
                      </Title>
                    
                    <Button transparent>
                        <Icon name='ios-search' style={{fontSize: 26, color: '#ffffff'}} />
                    </Button>
                    <Button transparent>
                        <Icon name='ios-menu' style={{fontSize: 26, color: '#ffffff'}} />
                    </Button>
                </Header>

    <Content style={{}}>
    <SlideBox height={150} items={items} fixTopBug={true} />
      <View style={{backgroundColor:'#fff',paddingBottom:10,marginBottom:10}}>
        <View style={styles.menuView}>
                        <MenuButton renderIcon={require('../img/home_icons/wdgz.png')}
                                    showText={'我的关注'} tag={'wdgz'}/>
                        <MenuButton renderIcon={require('../img/home_icons/wlcx.png')}
                                    showText={'物流查询'} tag={'wlcx'}/>
                        <MenuButton renderIcon={require('../img/home_icons/cz.png')}
                                    showText={'充值'} tag={'cz'}/>
                        <MenuButton renderIcon={require('../img/home_icons/dyp.png')}
                                    showText={'电影票'} tag={'dyp'}/>
                                    <MenuButton renderIcon={require('../img/home_icons/wlcx.png')}
                                    showText={'物流查询'} tag={'wlcx'}/>
        </View>
        <View style={styles.menuView}>
                        <MenuButton renderIcon={require('../img/home_icons/yxcz.png')}
                                    showText={'游戏充值'} tag={'yxcz'}/>
                        <MenuButton renderIcon={require('../img/home_icons/xjk.png')}
                                    showText={'小金库'} tag={'xjk'}/>
                        <MenuButton renderIcon={require('../img/home_icons/ljd.png')}
                                    showText={'领京豆'} tag={'ljd'}/>
                        <MenuButton renderIcon={require('../img/home_icons/gd.png')}
                                    showText={'更多'} tag={'gd'}/>
                                    <MenuButton renderIcon={require('../img/home_icons/xjk.png')}
                                    showText={'小金库'} tag={'xjk'}/>
          </View>
        </View>




      <Grid style={{height:170,backgroundColor:'#fff',marginBottom:10}}>
        <Col style={{flex:2, borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
          <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/i2/TB1nQXGJVXXXXcEXXXXKKOh2VXX-432-567.jpg'}}/>
        </Col>
        <Col style={{flex:3 }}>
          <Row style={{flex:1, borderBottomWidth: 1,borderBottomColor: '#e9e9e9'}}>
                   <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/i3/TB1TwyeLFXXXXXRXXXX3P9TJpXX-675-294.png'}} />
       < /Row>
           <Row style={{flex:1 }}>
               <Col style={{flex:1 ,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
                  <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/tps/TB1V.NiKpXXXXbuaXXXXXXXXXXX-333-324.jpg'}} />
               </Col>
               <Col style={{flex:1 }}>
                <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/TB1koozJVXXXXcmXpXXXXXXXXXX-333-324.jpg'}} />
               </Col>
           </Row>
        </Col>
      </Grid>

      <Grid style={{height:190,backgroundColor:'#fff',marginBottom:10}}>
        <Col style={{flex:2,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
          <Row style={{flex:1,borderBottomWidth: 1,borderBottomColor: '#e9e9e9'}}>
            <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/tps/TB1pAN0LFXXXXb6XpXXXXXXXXXX-450-354.jpg'}}/>
            </Row>
          <Row style={{flex:1,}}>
             <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/imgextra/i1/97/TB2.98xXSzC11BjSszhXXbGVFXa_!!2-subaru.png'}}/>
          </Row>
        </Col>
        <Col style={{flex:3,}}>
          <Row style={{flex:1,borderBottomWidth: 1,borderBottomColor: '#e9e9e9'}}>
            <Col style={{flex:1,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/tps/TB1ElUEJVXXXXbfXFXXXXXXXXXX-225-354.png'}}/>
            </Col>
            <Col style={{flex:1,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/tps/TB1iV1bLpXXXXXGXpXXXXXXXXXX-225-354.png'}}/>
            </Col>
            <Col style={{flex:1,}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/i2/TB1YdhTLFXXXXaHXpXXFgMv5pXX-225-354.png'}}/>
            </Col>
          </Row>
          <Row style={{flex:1,}}>
             <Col style={{flex:1,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/i3/TB1PzZhLpXXXXbgXXXXKWJi7pXX-231-330.png'}}/>
            </Col>
            <Col style={{flex:1,borderRightWidth: 1,borderRightColor: '#e9e9e9'}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/tps/TB1fB84LFXXXXaxXXXXXXXXXXXX-225-354.png'}}/>
            </Col>
            <Col style={{flex:1,}}>
              <Image style={{flex:1}} resizeMode='contain'  source={{uri: 'https://gw.alicdn.com/tps/i2/TB1geeaLFXXXXa8XXXXFgMv5pXX-225-354.png'}}/>
            </Col>
          </Row>
        </Col>
      </Grid>

    <TitleWithLine title='最新上架' />
    <View style={{flexDirection:'row',flexWrap:'wrap',justifyContent:'space-between'}}>
      <View style={styles.itemView}>
          <View style={styles.item}>
             <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB1OsqWLFXXXXcyaXXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
             <View style={{flex:1,padding:5}}>
              <Text numberOfLines={2} style={{fontSize:12,color:'#333'}}>山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女</Text>
              <Text style={{color:'#ff5001'}}>¥ 85.00</Text>
             </View>
          </View>
      </View>
      <View style={styles.itemView}>
          <View style={styles.item}>
             <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i2/TB1m14RLXXXXXXjapXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
             <View style={{flex:1,padding:5}}>
              <Text numberOfLines={2} style={{fontSize:12,color:'#333'}}>山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女</Text>
              <Text style={{color:'#ff5001'}}>¥ 85.00</Text>
             </View>
          </View>
      </View>

      <View style={styles.itemView}>
          <View style={styles.item}>
             <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i3/TB1YOkaLXXXXXbPXpXXXXXXXXXX_!!0-item_pic.jpg_q50.jpg'}}/>
             <View style={{flex:1,padding:5}}>
              <Text numberOfLines={2} style={{fontSize:12,color:'#333'}}>山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女</Text>
              <Text style={{color:'#ff5001'}}>¥ 85.00</Text>
             </View>
          </View>
      </View>
      <View style={styles.itemView}>
          <View style={styles.item}>
             <Image  style={styles.img} resizeMode='contain'  source={{uri: 'https://img.alicdn.com/bao/uploaded/i4/TB19DzwKpXXXXb9XVXXYXGcGpXX_M2.SS2'}}/>
             <View style={{flex:1,padding:5}}>
              <Text numberOfLines={2} style={{fontSize:12,color:'#333'}}>山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女山地自行车男女</Text>
              <Text style={{color:'#ff5001'}}>¥ 85.00</Text>
             </View>
          </View>
      </View>


    </View>
      </Content>
    </Container>

    );
  }
}

//样式表
const styles = StyleSheet.create({
  menuView: {
    flexDirection: 'row',
    marginTop: 10
  },
  itemView: {
    backgroundColor: '#0f0',
    width: width / 2 - 2,
    height: (width / 2 - 2) + 70,
    marginBottom: 4
  },
  img: {
    width: width / 2 - 2,
    height: width / 2 - 2,
  },
  item: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

export default Shop;